<template>
	<div class="detailwarp">
		<div class="dt-top">
			<i class="i back icon-arrow_lift" @click="todetail"></i>
			订单详情
		</div>
		<div class="rechargre-list" v-if="whetherrechar">
			<div v-show="showstart">
			<h4>充值列表</h4>
			<ul>
				<li v-for="(item,index) in recharlist" @click="tochosedwhich(index)" :key="index">
					<span>充{{item.discountChargeMoney}}送{{item.discountAddMoney}}</span><span :class='{chosedimg : index==chosedwhich}'></span>
				</li>
			</ul>
			<div @click="startrechar">充值</div>
			</div>
			<div class="chosetype" v-show="showchose">
		<div class="chose1" @click="startk">开通会员</div>
		<div class="chose2" @click="startb">绑定会员</div>
		</div>

		<div class="login" v-if="!notlogin">
              <!--会员注册-->
          <div class="loginnew" v-if="logintype==1">
              <label for="name">姓名:</label>
              <input type="text" v-model="loginusername" name="name" placeholder="请输入姓名">
              <label for="phone">电话:</label>
              <input type="text" v-model="loginphone" name="phone" placeholder="请输入电话">
              
              
			  <p>
              <label for="validate">验证码:</label>
              <input type="text" v-model="validate" name="validate" placeholder="输入验证码">
			  <i></i>
              <span @click="sendvalidate(1)">{{validatetime}}</span>
			  </p>
              <div class="tologin" @click="register">
                  立即注册
              </div>
              <div class="back" @click="backnotvip" >
                  返回
              </div>
          </div>


          <!--会员绑定-->
          <div class="loginold" v-if="logintype==2">
              <label for="phone">电话:</label>
              <input type="text" v-model="phone2" name="phone" placeholder="请输入电话">
              
              <p>
              <label for="validate">验证码:</label>
              <input type="text" v-model="code" name="validate" placeholder="输入验证码">
			  <i></i>
              <span @click="sendvalidate(0)">{{validatetime}}</span>
			  </p>
              <div class="tologin" @click="bindvip">
                  立即绑定
              </div>
              <div class="back" @click="backnotvip" >
                  返回
              </div>
          </div>
      </div>


			<img src="../../../static/images/x.png" @click="stoprechar">
		</div>
		<div class="paydetail">
			<p><span class="fi">支付剩余时间</span><span>{{time | filttime}}</span></p>
			<p><span class="fi">总计：</span><span>{{totalprice}}</span></p>
			<p><span class="fi">红包抵扣:</span><span>{{discount}}</span></p>

			<split2></split2>
			<div class="rechargre">
			<p v-if="isvip"><span class="fi">会员余额:{{vipmoney}}</span><!--<span @click="whethervip"  :class="{checkbutt:usevip}" class="butt"  style="border:1px solid #ddd"><b></b></span>--></p>
			<p v-if="havesend" class="send"><span class="fi">充值赠送:</span><span @click="torechargre"><i v-for="(item,index) in showoutlist" :key="index">充{{item.discountChargeMoney}}送{{item.discountAddMoney}}</i> <b class="i back icon-keyboard_arrow_right"></b></span></p>
			</div>
			<split2></split2>
			<div class="relpaid">支付金额：{{totalprice-discount | two}}</div>
			<span class="tip">(如是会员，将优先扣除会员余额哦)</span>
			<div class="paidnow" @click="pay">立即支付</div>
		</div>
	</div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import wx from 'weixin-js-sdk'
import split2 from '../shopcart/split2'
	export default{
		data(){
			return{
				isvip:false,
				show:false,
				showstart:true,
				showchose:false,
				notlogin:true,
				cansend:true,
				vipmoney:'',
				showload:false,
				havesend:false,
				logintype:2,
				loginusername:'',
				rechargreargs:{},
				loginphone:'',
				validatetime:'验证码',
				validate:'',
				phone2:'',
				code:'',
				time:300,
				page_configpay:{},
				canpay:true,
				usevip:true,
				chosedwhich:0,
				whetherrechar:false,
				recharlist:[
				],
				showoutall:[]
				
			}
		},
		methods:{
			senddoublereport:function(){
				var _this=this
				var newprice=parseFloat(_this.totalprice-_this.discount).toFixed(2)
				var oldprice=this.$store.state.doublefirst
				if(newprice>oldprice&&(this.$store.state.doubleused||this.$store.state.doublenumused)&&oldprice!=0){
							this.$http.post(sessionStorage.baseurl+"/a/phone/doublePacket",qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,
						price:parseFloat(newprice-oldprice).toFixed(2)}))
						.then(function(res){
							if(res.data.code!=1){
								alert(res.data.msg)
							}
							else{
								
							}
						})
						.catch(error=>{
							alert(error)
						})
				}
			},

			startrechar:function(){
				if(this.isvip){
					this.rechargre()
				}
				else{
					this.showstart=false,
					this.showchose=true
				}
			},

			/**充值函数 */
					rechargre:function(){
						var _this=this
						this.inload=true
						axios.post(sessionStorage.baseurl+'/a/phone/saveRecharge',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType,money:parseFloat(_this.recharlist[_this.chosedwhich].discountChargeMoney).toFixed(2)}))
						.then(res=>{
						if(res.data.code==1){
							_this.rechargreargs=res.data.data;
							if(sessionStorage.payType==1){
							_this.alijsApiCall1()
							}
							else if(sessionStorage.payType==2){
							_this.callpay1()
							}
						}
						else{
							alert(res.data.msg)
							_this.inload=false
						}
						})
						.catch(error=>{
						alert(error)
						_this.inload=false
						})
					},



				/**会员支付所有函数 */

			callpay1:function(){    
				var _this=this
			if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', _this.jsApiCall1, false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', _this.jsApiCall1)
					document.attachEvent('onWeixinJSBridgeReady', _this.jsApiCall1)
				}
			} else {
				_this.jsApiCall1()
			}
			},
			jsApiCall1:function(){
			var _this=this
			var info = JSON.parse(_this.rechargreargs)
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":info.appId.toString(),
					"nonceStr":info.nonceStr.toString(),
					"package":info.package1.toString(),
					"paySign":info.paySign.toString(),
					"signType":info.signType.toString(),
					"timeStamp":info.timeStamp.toString()
				},
				function(res) {
					if(res.err_msg == "get_brand_wcpay_request:ok" ){
						_this.vipmoney+=(_this.recharlist[_this.chosedwhich].discountChargeMoney+_this.recharlist[_this.chosedwhich].discountAddMoney)
					_this.stoprechar()	
					setTimeout(function(){
								_this.checkvip()
						},200)
					}else{
							alert('支付失败');
							_this.inload=false
							}
				}
				);
			},
			alijsApiCall1:function(){
				var _this=this
				var info = JSON.parse(_this.rechargreargs)
					AlipayJSBridge.call("tradePay", {
						"tradeNO": info.tradeNO.toString()
				}, function(result) {
					if (result.resultCode == '9000') {
						_this.stoprechar()
						_this.vipmoney+=(_this.recharlist[_this.chosedwhich].discountChargeMoney+_this.recharlist[_this.chosedwhich].discountAddMoney)
						setTimeout(function(){
								_this.checkvip()
						},200)
					} else {
							alert('支付失败');
							_this.inload=false
					}
				});
			},

			/**获取商家充值优惠活动列表 */
				getrechargre:function(){
					var _this=this
					axios.post(sessionStorage.baseurl+'/a/phone/getDiscount',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
					.then(res=>{
					if(res.data.code==1){
						if(!res.data.data){
							_this.havesend=false
							return
						}
						_this.recharlist=res.data.data
						console.log(_this.recharlist)
						_this.havesend=true
					}
					else{
						alert(res.data.msg)
						_this.rechargreload=false;
					}
					})
					.catch(error=>{
					alert(error)
					_this.rechargreload=false;
					})
				},
			 /**检查是否是会员 */
					checkvip:function(){
					this.inload=true
						var _this=this
						axios.post(sessionStorage.baseurl+'/a/phone/judgeVIP',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,type:sessionStorage.payType}))
						.then(res=>{
						if(res.data.code==1){
							_this.isvip=true
							_this.inload=false
							_this.vipmoney=res.data.data.vipMoney
						}
						else if(res.data.code==2){
							_this.isvip=false
							_this.inload=false
						}
						else{
							alert(res.data.msg)
						}
						})
						.catch(error=>{
						alert(error)
						})
					},
			startk:function(){
				this.showchose=false
				this.notlogin=false,
				this.logintype=1
			},
			isphone:function(phone){
				var pattern = /^1[34578]\d{9}$/; 
				return pattern.test(phone);
			},
			startb:function(){
				this.showchose=false
				this.notlogin=false,
				this.logintype=2
			},
			backnotvip:function(){
				this.notlogin=true
				this.showchose=true
			},
			/*绑定和注册的发送验证码*/ 
				sendvalidate:function(index){
					var phonenumber=''
					if(!this.cansend){
					return
						}
					if(index==1){
					if(this.loginphone==''){
					alert("未填写电话号码")
						return
					}
					if(!this.isphone(this.loginphone)){
						alert("请输入正确的电话号码")
						return
						}
						phonenumber=this.loginphone
						}
						else if(index==0){
						if(this.phone2==''){
						alert("未填写电话号码")
						return
					}
					if(!this.isphone(this.phone2)){
							alert("请输入正确的电话号码")
					return
					}
						phonenumber=this.phone2
						}
						var _this=this
						_this.validatetime=60;
						axios.post(sessionStorage.baseurl+"/a/phone/getcode",qs.stringify({phoneNum:phonenumber,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token}))
						.then(res=>{
						if(res.data.code==1){
						_this.cansend=false
						_this.validateinterval=setInterval(function(){
						_this.validatetime--;
						if(_this.validatetime==0){
						_this.validatetime="验证码"
							 clearInterval(_this.validateinterval)
 						_this.cansend=true
						}
					},1000)
						}
						else{
						alert(res.data.msg)
						}
						})
						.catch(error=>{
					alert(error)
						})
						},

					/*注册函数*/ 
						register:function(){
							var _this=this
							_this.showload=true
							axios.post(sessionStorage.baseurl+'/a/phone/jiaoyan',qs.stringify({phoneNum:_this.loginphone,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,code:_this.validate,token:sessionStorage.token}))
							.then(res=>{
							if(res.data.code==1){
								axios.post(sessionStorage.baseurl+'/a/phone/saveVIP',qs.stringify({sellerid:sessionStorage.sellerid,token:sessionStorage.token,VIPName:_this.loginusername,type:sessionStorage.payType,openid:sessionStorage.openid,phoneNum:_this.loginphone}))
								.then(res=>{
								if(res.data.code==1){
									_this.checkvip()
									_this.notlogin=true
									_this.showload=false
									_this.showstart=true
									_this.showchose=false
								}
								else{

									alert(res.data.msg)
									_this.showload=false
								}
								})
								.catch(error=>{
								alert(error)
								_this.showload=false
								})
							}
							else{
								alert(res.data.msg)
									_this.showload=false
											}
									})
									.catch(error=>{
								alert(error)
							_this.showload=false
						})
								},


				bindvip:function(){
						var _this=this
						_this.showload=true
						axios.post(sessionStorage.baseurl+'/a/phone/jiaoyan',qs.stringify({phoneNum:_this.phone2,sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,code:_this.code}))
						.then(res=>{
						if(res.data.code==1){
							axios.post(sessionStorage.baseurl+'/a/phone/bangdinghuiyuan',qs.stringify({sellerid:sessionStorage.sellerid,openid:sessionStorage.openid,token:sessionStorage.token,phoneNum:_this.phone2,type:sessionStorage.payType}))
							.then(res=>{
							if(res.data.code==1){
								_this.checkvip()
								_this.notlogin=true
								_this.showload=false
								_this.showstart=true
								_this.showchose=false
							}
							else{
								alert(res.data.msg)
								_this.showload=false
							}
							})
							.catch(error=>{
							alert(error)
							_this.showload=false
							})
						}
						else{
							alert(res.data.msg)
							_this.showload=false
						}
						})
						.catch(error=>{
						alert(error)
						_this.showload=false
						})
					},

			stoprechar:function(){
				this.whetherrechar=false
				this.showstart=true
				this.showchose=false
				this.notlogin=true
			},
			torechargre:function(){
				this.whetherrechar=true
			},
			tochosedwhich:function(index){
				this.chosedwhich=index
			},
			whethervip:function(){
				this.usevip=!this.usevip
			},
			todetail:function(){
				this.$router.push("/orderdetail")
			},
			pay:function(){
				if(this.canpay){
					
				var _this=this
			if (this.time == 0) {
	
				window.location.href = sessionStorage.mainurl
		
			} else {
				//var paytype = localStorage.payType
				var wxorzfb = sessionStorage.payType==1 ? "alipay" : "weixin" //判断是微信还是支付宝
				_this.canpay=false
				_this.$http.post(sessionStorage.baseurl+"/a/phone/orderpayinit",qs.stringify({wxorzfb: wxorzfb,openid: sessionStorage.openid,out_trade_no: _this.$store.state.orderid,token:sessionStorage.token,whethervip:_this.usevip}))
				 .then(res=>{
				 	if (res.data.code == 1) {
				 		_this.canpay=true
							_this.page_configpay = res.data.data;    //获得支付配置信息

							    if(JSON.parse(_this.page_configpay).payStates.toString=="1"){    //如果已经支付过了
								   window.location.href = sessionStorage.mainurl;
					        }
							  if(wxorzfb=="weixin"){
								  _this.callpay()                             //微信调微信的支付支付宝调支付宝的
							  }else if(wxorzfb=="alipay"){
						       _this.alijsApiCall()
							}
						}
				 	else if(res.data.code==2){
				 		_this.canpay=true
						 alert(res.data.msg)
						 localStorage.numchosed=true
						localStorage.numchosedtime=(new Date()).getTime()
				 		window.location.href = sessionStorage.mainurl;
				 	}
				 	else{
						 alert(res.data.msg);     
						 _this.canpay=true
						}
				 })
				 .catch(function(error){
					alert(error)
					_this.canpay=true
				})
				
				
				
				
				
			}
		}
				else{
					return
				}
			},
			
			
			callpay:function(){    
				var _this=this
			if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', _this.jsApiCall, false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', _this.jsApiCall)
					document.attachEvent('onWeixinJSBridgeReady', _this.jsApiCall)
				}
			} else {
				_this.jsApiCall()
			}
			},
			jsApiCall:function(){
			var _this=this
			var info = JSON.parse(_this.page_configpay)
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":info.appId.toString(),
					"nonceStr":info.nonceStr.toString(),
					"package":info.package1.toString(),
					"paySign":info.paySign.toString(),
					"signType":info.signType.toString(),
					"timeStamp":info.timeStamp.toString()
				},
				function(res) {
					if(res.err_msg == "get_brand_wcpay_request:ok" ){
						localStorage.numchosed=true
						localStorage.numchosedtime=(new Date()).getTime()
						window.location.href = sessionStorage.mainurl;
					}else{
							alert('支付失败');
						setTimeout(function(){
							window.location.href = sessionStorage.mainurl;
						})
							}
				}
				);
			},
			alijsApiCall:function(){
				var _this=this
				var info = JSON.parse(_this.page_configpay)
					AlipayJSBridge.call("tradePay", {
						"tradeNO": info.tradeNO.toString()
				}, function(result) {
					if (result.resultCode == '9000') {
						localStorage.numchosed=true
						localStorage.numchosedtime=(new Date()).getTime()
						window.location.href = sessionStorage.mainurl;
					} else {
							alert('支付失败');
						setTimeout(function(){
							window.location.href = sessionStorage.mainurl
						})
					}
				});
			},
			paysuccess:function(){
				var _this=this
				
				_this.$http.post(sessionStorage.baseurl+"/a/phone/orderpaysuccess",qs.stringify({out_trade_no:_this.$store.state.orderid,token:sessionStorage.token,openid:sessionStorage.openid}))
				.then(res=>{
					if(res.data.code==1){
						window.location.href = sessionStorage.mainurl;
					}
					else{
						alert(res.msg)
					}
				})
				.catch(function(error){
					alert(error)
				})
				
				
				
				
				
				this.$http({
					method:"post",
					url:sessionStorage.baseurl+"/a/phone/orderpaysuccess",
					data: qs.stringify({
						out_trade_no:_this.$store.state.orderid,
						token:sessionStorage.token,
						openid:sessionStorage.openid
					}),
					success:function(res){
						if(res.data.code == 1){
							window.location.href = sessionStorage.mainurl;
				
						}
						else{
							alert(res.msg)
						}
					},
					error:function(){
							alert('服务器出错')
					}
				});
				
				
				
				
				
				
			}
		},
		mounted:function(){
			this.senddoublereport()
			this.checkvip()
			this.getrechargre()
			if(this.$store.state.totalprice==0){
				window.location.href=sessionStorage.mainurl
			}
			var _this=this
			setTimeout(function(){
				_this.show=!_this.show
			},500)
			var T=setInterval(function(){
				if(_this.time!=0){
							_this.time--
				}
				else{
					clearInterval(T)
				}
                  
			},1000)
		},
		filters: {
        	filttime: function(value) {
			var M=parseInt(value/60)
			var S=value-M*60
			if(S<10){
				S='0'+S
			}
            return (M+':'+S);
			  },
			two:function(value){
					return parseFloat(value).toFixed(2)
				}  
        },
		computed:{
			totalprice:function(){
				return this.$store.state.totalprice
			},
			discount:function(){
				return this.$store.state.hongbaototal.toFixed(2)
			},
			showoutlist:function(){
				
				var list=[]
				var _this=this
				if(this.recharlist.length==1){
					list.push(_this.recharlist[0])
					return list 
				}
				else if(this.recharlist.length>=2){
					list.push(_this.recharlist[0])
					list.push(_this.recharlist[1])
					return list
				}
				else{
					return list
				}
				
			}
		},
		components:{
			split2
		}
	}
</script>

<style scoped="scoped" lang="stylus">
	.detailwarp
		background #f3f5f7
		width 100%
		height 100%
		box-sizing border-box
		.paydetail
			width 90%
			margin auto
			margin-top 0.2rem
			background white
			overflow auto
			.tip
				font-size 0.25rem
				display block
				color black
				float right
				margin-top 0.1rem
			.paidnow
				width 90%
				margin 1rem auto
				padding 0.1rem
				border-radius 0.05rem
				color white
				background #00b43c
				font-size 0.4rem
				line-height 0.6rem
				text-align center
			.relpaid
				width 100%
				text-align right
				line-height 0.5rem
				font-size 0.4rem
				box-sizing border-box
				color #db2244
				padding 0.1rem 0.3rem
			.rechargre
				width 100%
				p
					width 100%
					box-sizing border-box
					padding 0.2rem 0.3rem
					span
						width 0.9rem
						background white
						border-radius 0.5rem
						float right
						display block
						text-align right
						font-size 0.3rem
						line-height 0.5rem
						box-sizing border-box
					.fi
						text-align left !important
						float left
						width 70%
					.butt
						position relative
						transition:all 1s
						b
							width 0.5rem
							border 0.01rem solid #ddd
							transition:all 1.5s
							box-sizing border-box
							height 0.5rem
							float left
							border-radius 0.5rem
							background white
					.checkbutt
						position relative
						background black
						transition:all 1s
						b
							width 0.5rem
							transition:all 1.5s
							height 0.5rem
							float right
							border-radius 0.5rem
							background white
				.send
					span
						width 70%
						float left
						display block
						text-align right
						font-size 0.3rem
						line-height 0.5rem
						box-sizing border-box
						i
							padding 0.1rem 0.1rem
							font-style normal
							box-sizing border-box
							background #db2244
							color white
							font-size 0.25rem
							vertical-align middle
							margin-left 0.1rem
							border-radius 0.05rem
						b
							vertical-align middle
					.fi
						text-align left !important
						width 30%
			p
				width 100%
				overflow auto
				box-sizing border-box
				padding 0.2rem 0.3rem
				span
					width 50%
					float left
					display block
					text-align right
					font-size 0.3rem
					line-height 0.5rem
					box-sizing border-box
				.fi
						text-align left !important	   
		.rechargre-list
			position fixed
			z-index 1000
			width 100%
			height 100%
			background rgba(0,0,0,0.8)
			img
				margin-top 1rem
				width 1rem
			.login
				width 90%
				margin auto
				margin-top 1rem
				background white
				display flex
				justify-content center
				align-items center
				.loginold
					width 90%
					box-sizing border-box
					background white
					overflow auto
					padding 1rem 0.1rem 0.1rem 0.1rem
					.tologin
						width 100%
						margin-top 1rem
						float left 
						text-align center
						font-size 0.32rem
						height 0.8rem
						line-height 0.6rem
						color white
						background #23d822e0
					.back
						width 100%
						margin-top 1rem
						float left
						text-align center
						background white
						font-size 0.4rem
						color #ddd
						line-height 0.8rem
					p
						width 100%
						margin-top 0.3rem
						height 0.8rem
						float left
						label
							width 30%
							height 0.7rem
							margin-top 0
							color black
							line-height 0.7rem
							text-align center 
							font-size 0.3rem
							float left
						input
							width 40%
							margin-top 0
							border 0.01rem solid #ddd
							box-sizing border-box
							height 0.7rem
							font-size 0.3rem
							float left
							text-align center
						i
							width 3%
							display block
							height 0.7rem
							color black
							box-sizing border-box
							border-left 0.01rem solid #dddddd
							float left
							margin-left 3% 
						span 
							display block
							color black
							box-sizing border-box
							border 0.01rem solid #ddd
							border-radius 0.2rem
							float left
							font-size 0.3rem
							height 0.7rem
							line-height 0.7rem
							width 24%
					label
						width 30%
						margin-top 0.3rem
						color black
						height 0.7rem
						text-align center 
						font-size 0.3rem
						line-height 0.7rem
						float left
					input
						width 70%
						border-radius 0.3rem
						margin-top 0.3rem
						border 0.01rem solid #ddd
						text-align center
						box-sizing border-box
						height 0.7rem
						font-size 0.3rem
						float left
				.loginnew
					width 90%
					box-sizing border-box
					background white
					overflow auto
					padding 0 0.1rem
					.back
						width 100%
						margin-top 1rem
						float left
						text-align center
						font-size 0.4rem
						background white
						color #ddd
						line-height 0.8rem
					.tologin
						width 100%
						margin-top 1rem
						float left 
						text-align center
						font-size 0.32rem
						height 0.8rem
						line-height 0.6rem
						color white
						background #23d822e0
					p
						width 100%
						margin-top 0.3rem
						height 0.8rem
						float left
						label
							width 30%
							height 0.7rem
							color black
							margin-top 0
							line-height 0.7rem
							text-align center 
							font-size 0.3rem
							float left
						input
							width 40%
							margin-top 0
							border 0.01rem solid #ddd
							box-sizing border-box
							height 0.7rem
							font-size 0.3rem
							float left
							text-align center
						i
							width 3%
							display block
							height 0.7rem
							box-sizing border-box
							border-left 0.01rem solid #dddddd
							float left
							color black
							margin-left 3% 
						span 
							display block
							box-sizing border-box
							border 0.01rem solid #ddd
							border-radius 0.2rem
							float left
							color black
							font-size 0.3rem
							height 0.7rem
							line-height 0.7rem
							width 24%
					label
						width 30%
						margin-top 0.3rem
						height 0.7rem
						text-align center 
						font-size 0.3rem
						color black
						line-height 0.7rem
						float left
					input
						width 70%
						border-radius 0.3rem
						margin-top 0.3rem
						border 0.01rem solid #ddd
						text-align center
						box-sizing border-box
						height 0.7rem
						font-size 0.3rem
						float left
			.chosetype
				width 80%
				margin auto
				margin-top 1rem
				padding 0.2rem
				border-radius 0.2rem
				overflow auto
				height 2rem
				background white
				div
					width 35%
					float left
					margin-left 10%
					line-height 0.7rem
					font-size 0.3rem
					color black
					text-align center
					background white
					border 0.01rem solid #ddd
			div
				width 80%
				margin auto
				margin-top 1rem
				padding 0.15rem 0
				border-radius 0.3rem
				background white
				box-sizing border-box
				h4
					width 100%
					padding 0.1rem 0
					margin auto
					font-size 0.35rem
					text-align center
					line-height 0.5rem
					border-bottom 0.01rem solid #ddd
				div
					width 90%
					padding 0.1rem 0
					background black
					color white
					margin 0.3rem auto 0 auto
					font-size 0.35rem
					text-align center
					line-height 0.5rem
				ul
					li
						width 100%
						overflow auto
						padding 0.3rem 0.5rem
						box-sizing border-box
						font-size 0.3rem
						line-height 0.5rem
						margin auto
						text-align center
						border-bottom 0.01rem solid #ddd
						span
							font-size 0.32rem
							text-align left
							width 0.4rem
							height 0.4rem
							border-radius 0.4rem
							border 0.01rem solid #ddd
							line-height 0.5rem
							float right
							&:first-child
								float left
								border 0
								width 70%
						span.chosedimg
							background url(../../assets/select1.png)
							background-size 100% 100%
		.dt-top
			width 100%
			height 0.8rem
			text-align center
			line-height 0.8rem
			font-size 0.3rem
			.back
				position absolute
				height 0.6rem
				top 0.1rem
				left 0.2rem
				font-size 0.3rem
				line-height 0.6rem
	.pay-leave-to
		opacity 0
		transform scale(0.6)
	.pay-leave-active
		transition 0.5s
</style>